<template>
  <div class="config-list-page">
    <div class="page-header">
      <h1>Config管理</h1>
    </div>
    <a-card>

      <AnyTable
        ref="itemTable"
        :autoLoad="true"
        :dataLoader="loadItemData"
        :tableColumns="tableColumns"
        :searchParams="searchParams"
        :tableScroll="{ x: 'max-content' }"
        tableRowKey="id"
        @loadComplete="handleLoadComplete"
      >
        <template #tableToolbar>
          <div>
            <a-button type="primary" class="mg-b-30" @click="addItem">
              <PlusOutlined /> 新增项目
            </a-button>
          </div>
        </template>
        <template #tableCell="{ column, record }">
          <template v-if="column.key === 'serviceType'">
            <a-tag>
              {{ record.serviceType === 1 ? 'MAP,' : '' }}
              {{ record.serviceType === 2 ? 'OSS,' : '' }}
              {{ record.serviceType === 3 ? 'SMS,' : '' }}
              {{ record.serviceType === 4 ? 'OCR' : '' }}
              {{ typeof record.serviceType === 'string' ? record.serviceType : 'unknown' }}
            </a-tag>
          </template>
          <template v-if="column.key === 'op'">
            <a-space>
              <a-button type="link" @click="editItem(record)">编辑</a-button>
              <a-button type="link" @click="viewItem(record)">查看</a-button>
              <a-button type="link" danger @click="deleteItem(record.id)">删除</a-button>
            </a-space>
          </template>
        </template>
      </AnyTable>
    </a-card>

    <ConfigAddOrEditDrawer
      ref="addOrEditDrawRef" :callbackFunc="searchItems"
    />

    <ConfigDetailDrawer ref="detailDrawerRef" />
  </div>
</template>

<style scoped>
.config-list-page {
  padding: 24px;
  background: #f0f2f5;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e8e8e8;
}

.page-header h1 {
  margin: 0;
  font-size: 24px;
  color: #262626;
  font-weight: 600;
}
</style>

<script lang="ts" setup>
import { ref, reactive, getCurrentInstance } from "vue";
import { PlusOutlined } from '@ant-design/icons-vue';
import { apiConfigFetchList, apiConfigDelete } from "./api";
import ConfigDetailDrawer from "./Detail.vue";
import ConfigAddOrEditDrawer from "./AddOrEdit.vue";

const { $AnyMessageBox } = getCurrentInstance()!.appContext.config.globalProperties;

// 搜索参数
const searchParams = reactive<{
}>({
});

// 表格列定义
const tableColumns = reactive([
  { key: "id", title: "Id", dataIndex: "id" },
  { key: "serviceType", title: "ServiceType", dataIndex: "serviceType" },
  { key: "provider", title: "Provider", dataIndex: "provider" },
  { key: "configJson", title: "ConfigJson", dataIndex: "configJson" },
  { key: "enabled", title: "Enabled", dataIndex: "enabled" },
  { key: "createdTime", title: "createdTime", dataIndex: "createdTime" },
  { key: "updatedTime", title: "updatedTime", dataIndex: "updatedTime" },
  { key: "op", title: "操作", fixed: "right", align: "center" },
]);

// 组件引用
const itemTable = ref();
const addOrEditDrawRef = ref();
const detailDrawerRef = ref();

// 加载数据
async function loadItemData(params: any) {
  try {
    const response = await apiConfigFetchList(params);
    return response.data;
  } catch (error) {
    console.error('Failed to load item data:', error);
    return { records: [], total: 0 };
  }
}

// 加载完成回调
function handleLoadComplete() {
  // console.log('Item data loaded successfully');
}

// 搜索和重置
function searchItems() {
  itemTable.value?.refreshTable(true);
}

function resetSearch() {
  itemTable.value?.resetTable();
}

// CRUD操作
function addItem() {
  addOrEditDrawRef.value?.show(null);
}

function editItem(item: any) {
  addOrEditDrawRef.value?.show(item);
}

function viewItem(item: any) {
  detailDrawerRef.value?.openDrawer(item);
}

function deleteItem(itemId: number) {
  $AnyMessageBox.confirmDanger('确认删除该项目信息？', '', () => {
    apiConfigDelete(itemId).then(() => {
      $AnyMessageBox.message.success('删除成功');
      searchItems();
    });
  });
}
</script>